<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>轮播列表</span>
            </div>
            <el-table
                :data=slides
                border
                size="mini"
                style="width: 100%">
                <el-table-column
                    label="ID"
                    prop="id"
                    width="80">
                </el-table-column>

                <el-table-column
                    label="标题"
                    prop="title"
                >
                </el-table-column>

                <el-table-column
                    #default="{row:slide}"
                    label="操作"
                    width="200">
                    <el-button-group>
                        <el-button size="mini" type="primary" @click="edit(slide)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(slide)">删除</el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>

        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>预览</span>
            </div>
            <el-carousel :interval="4000" height="200px" type="card">
                <el-carousel-item v-for="(item,index) in slides" :key="index">
                    <h3 class="medium">
                        <img :src="item.url" alt="">
                    </h3>
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {name: 'admin.slide.index', meta: {title: '轮播列表'}},
    data() {
        return {
            slides: [],
            tabs
        }
    },
    async created() {
        await this.load()
    },
    methods: {
        //加载评论
        async load() {
            this.slides = await this.axios.get(`admin/slide`);
        },
        del(slide) {
            this.$confirm('确定删除吗？', '提示').then(async () => {
                await this.axios.delete(`admin/slide/${slide.id}`)
                this.slides.splice(this.slides.indexOf(slide), 1)
            })
        },
        edit(slide) {
            this.$router.push({name: 'admin.slide.edit', params: {id: slide.id}});
        }
    }
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
